<!doctype html>
<html>
	<head>
	<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<style>
		html,body{
			margin:0;
			padding: 0;
		}
		#mycanvas_container{
			overflow: hidden;		
		}
	</style>
	
	<!--<script type="text/javascript" src="../../dist/jmgraph.min.js"></script>-->
	</head>
	<body>
		<div id="mycanvas_container"></div>
		<canvas id="textureCanvas"></canvas>
	</body>
	<script type="module">	
		import { jmGraph } from "../../index.js";
		import jmLabel from '../../src/shapes/jmLabel.js';

        var container = document.getElementById('mycanvas_container');
        const textureCanvas = document.getElementById('textureCanvas');

        //开发模式下，引用jmGraph.js，请使用这种方式，内部会初始化组件
		var g = jmGraph.create('mycanvas_container', {
			width: 800,
			height: 600,
			mode: 'webgl',
			style: {
				fill: '#000'
			}
		});
		init(g);
			
		function init(g){
			//g.style.fill = '#000'; //画布背景
			var style = {
                stroke: 'green',
                fill: 'yellow',
				textAlign: 'right',
                textBaseline: 'middle',
                fontFamily: "Arial",
                fontSize: 24,
                border: {
					left:1,
					top:1,
					right:1,
					bottom:1,
					style: {
						stroke: 'red'
					}
				},
                shadow: '0,0,10,#fff'
			};
			//style.opacity = 0.2;		

			//创建一个label
            var label = g.createShape(jmLabel,{
                style:style,
				//position:{x:200,y:150},
				center: {x: 250, y: 250},
                text:'test label',
                //width:120,
                height:80
            });	
            g.children.add(label);	
			label.canMove(true);

			g.bind('touchleave', (args) => {
				console.log('touchleave', args);
			});
            

			function update() {
				if(g.needUpdate) g.redraw();
				requestAnimationFrame(update);
			}

			update();
		}
	</script>
</html>